<template>
	<view>
		<view class="cc-title">
			<view class="cc-txt-bold" style="font-size: 50rpx;">欢迎注册</view>
			<text class="padding-v30" style="color: #222222;">注册登录账号即可查看更多精彩内容</text>
		</view>
		<view style="padding: 30rpx 60rpx;margin-top: 50rpx;">
			<fui-input v-model="mobile" backgroundColor="#F8F8F8" radius="16" borderColor="#f3f3f3" :padding="['30rpx','20rpx']"
				placeholder="用户名">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="my-fill" color="#333" :size="36"/>
					</view>
				</template>
			</fui-input>
		</view>
		<view style="padding: 10rpx 60rpx;">
			<fui-input v-model="code" backgroundColor="#F8F8F8" radius="16" borderColor="#f3f3f3" :padding="['30rpx','20rpx']"
				placeholder="请输入手机号">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="mobile-fill" color="#333" :size="36"/>
					</view>
				</template>
			</fui-input>
		</view>
		<view style="padding: 30rpx 60rpx;">
			<fui-input  backgroundColor="#F8F8F8" radius="16" borderColor="#f3f3f3" :padding="['30rpx','20rpx']"	
				placeholder="请设置密码(6-20个数字或字母)">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="lock-fill" color="#333" :size="36"/>
					</view>
				</template>
			</fui-input>
		</view>
		<view style="padding: 10rpx 60rpx 30rpx 60rpx;">
			<fui-input :password="password" v-model="password_confirm" backgroundColor="#F8F8F8" radius="16" :padding="['30rpx','20rpx']"
				borderColor="#f3f3f3" placeholder="请确认密码">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha-fill" color="#333" :size="36"/>
					</view>
				</template>
				<fui-icon :name="password?'invisible':'visible'" color="#B2B2B2" :size="50" @click="getPassword"/>
			</fui-input>
		</view>
		<view class="cc-rows cc-flex-center" style="margin-top: 50rpx;">
			<view
				class="cc-color-white cc-columns cc-flex-center cc-flex-vcenter cc-bg-4c col-85"
				style="border-radius: 80rpx;margin:auto;height: 96rpx;" formType="submit">立即注册</view>
		</view>
		<view class="cc-rows cc-space-between" style="margin-top: 50rpx;padding: 0 60rpx;">
			<text class="cc-size-28" style="color: #666666;">注册账号</text>
			<view class="">
				<text class="cc-size-28" style="color: #666666;">没有账号？</text>
				<text class="cc-color-4c cc-size-28" @click="goRegister">立即注册</text>
			</view>
		</view>
		<view class="cc-columns cc-flex-center cc-flex-vcenter" style="margin-top: 80rpx;">
			<view class="">
				<fui-label>
					<view class="fui-align__center " style="margin-top: 80rpx;">
						<fui-checkbox @change='check' color="#4cccc5" value="1" checked/>
						<text class="fui-text cc-color-999 cc-size-26"
							style="line-height: 10rpx;margin-left: 20rpx;">已阅读并同意途友新能源
							<text class="cc-color-4c">服务协议</text>
							和
							<text class="cc-color-4c">隐私政策</text>
						</text>
					</view>
				</fui-label>
			</view>
		</view>
	</view>
</template>

<script>
	const rules = [{
		name: "password",
		rule: ["required", "isEnAndNo"],
		msg: ["请输入密码", "密码为4~30位数字和字母组合"]
	}, ]
	export default {
		data() {
			return {
				isAgree: true,
				mobile: "",
				code: '',
				password: true,
				password_confirm: '',
			}
		},
		onLoad(option) {
		},
		methods: {
			check(e) {
				this.isAgree = e.checked;
				console.log(this.checked)
			},
			//密码登录
			goPassword() {
				
			},
			//密码框眼睛显示隐藏
			getPassword() {
				this.password = !this.password
			},
		}
	}
</script>

<style lang="scss">
page {background: #fff;}
.cc-title {padding: 150rpx 60rpx 0 60rpx;line-height: 80rpx;}
.fui-left__icon {padding-right: 24rpx;}
</style>